<style>

</style>

<template>
    <div id="payment">
        <div class="row">
            <div class="col-md-12">
                <condition :data="condition" @getCondition="getCondition"></condition>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <el-table :data="payments" size="small" border style="width: 100%">
                    <el-table-column sortable align="center" prop="State" label="支付状态" width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">待审核</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已审核</el-tag>
                            <el-tag v-if="scope.row.State == 10">待支付</el-tag>
                            <el-tag v-if="scope.row.State == 11" type="success">已支付</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="PayNo" label="支付流水号" width="200"></el-table-column>
                    <el-table-column align="center" prop="TradeNo" label="交易号" width="250"></el-table-column>
                    <el-table-column align="center" label="支付金额" width="100">
                        <template slot-scope="scope">
                            <i class="fa fa-cny"></i>
                            <span>{{ scope.row.TotalPrice | currency }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="支付方式" width="100">
                        <template slot-scope="scope">
                            <span>{{ scope.row.PayMethod | payMethod }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Orders.length" label="订单数量" width="100"></el-table-column>
                    <el-table-column align="center" label="支付人" width="100">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Account.User"></user-detail>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="支付时间" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Auditor" label="审核人" width="100"></el-table-column>
                    <el-table-column align="center" label="审核时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.AuditTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="payment=scope.row; dialogVisible=true;">详细信息</el-button>
                            <el-button size="mini" type="success" @click="audit(scope.row)" v-if="scope.row.State == 0">审核通过</el-button>
                            <el-button size="mini" type="danger" @click="drop(scope.row)" v-if="authorize(['ROOT']) && scope.row.State != -1">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="详细信息" width="75%" :visible.sync="dialogVisible">
                <payment-detail :payment="payment"></payment-detail>
            </el-dialog>  
        </div>
    </div>
</template>

<script>

import {CurrencyFormat, TimeFormat, PayMethodFormat, DeepClone} from 'web/utils';
import UserDetail from 'views/user/user_detail.vue';
import Condition from './condition.vue';
import PaymentDetail from './payment_detail.vue';

export default {
    components: {
        Condition,
        UserDetail,
        PaymentDetail
    },
    data() {
        return {
            payments: [],
            pageCount: 0,
            pageSize: 10,
            condition: { },
            payment: {
                Orders: []
            },
            dialogVisible: false
        }
    },
    filters: {
        currency: CurrencyFormat,
        time: TimeFormat,
        payMethod: PayMethodFormat
    },
    methods: {

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$PaymentService.QueryPayments(this.condition, val, this.pageSize)
                .then(ret => {
                    this.payments = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.$PaymentService.QueryPayments(this.condition, 1, this.pageSize)
                .then(ret => {
                    this.payments = ret;
                });  
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$PaymentService.QueryPaymentsCount(condition),
                this.$PaymentService.QueryPayments(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.payments = ret[1];
            });
        },

        // 订单审核                
        audit(payment) {
            let __payment = DeepClone(payment);
            __payment.State = 1;

            this.$PaymentService.Audit(__payment)
                .then(ret => {
                    if(ret) {
                        payment.State = 1;
                        payment.Auditor = ret.Auditor;
                        payment.AuditTime = ret.AuditTime;
                    }
                });
        },

        // 删除支付
        drop(payment) {
            this.$confirm('您确定要删除支付单吗？', '删除支付单', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'}).then(() => {
                this.$PaymentService.Drop(payment)
                    .then(ret => {
                        if(ret) {
                            payment.State = -1;                         
                        }
                    });
            });
        }
    }
}
</script>
